<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账户管理 - 银行业务管理系统</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/css/all.min.css" rel="stylesheet">
    
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .navbar-brand {
            font-weight: bold;
            color: #fff !important;
        }
        
        .main-content {
            padding: 40px 20px;
        }
        
        .service-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            padding: 30px;
            margin-bottom: 30px;
            backdrop-filter: blur(10px);
        }
        
        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }
        
        .btn-report-loss {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            border: none;
            color: white;
            padding: 12px 30px;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        .btn-report-loss:hover {
            background: linear-gradient(135deg, #ee82e9 0%, #f3455a 100%);
            color: white;
            transform: translateY(-2px);
        }
        
        .btn-cancel-loss {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
            border: none;
            color: white;
            padding: 12px 30px;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        .btn-cancel-loss:hover {
            background: linear-gradient(135deg, #32d467 0%, #2ee6c4 100%);
            color: white;
            transform: translateY(-2px);
        }
        
        .btn-change-password {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            color: white;
            padding: 12px 30px;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        .btn-change-password:hover {
            background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
            color: white;
            transform: translateY(-2px);
        }
        
        .btn:disabled {
            background: #6c757d !important;
            transform: none !important;
        }
        
        .loading {
            display: none;
            text-align: center;
            padding: 20px;
        }
        
        .required {
            color: red;
        }
        
        .input-group-text {
            background-color: #667eea;
            color: white;
            border-color: #667eea;
        }
        
        .result-card {
            background: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            text-align: center;
            display: none;
            margin-top: 20px;
        }
        
        .security-tips {
            background: #e3f2fd;
            border-left: 4px solid #2196f3;
            padding: 15px;
            margin-top: 20px;
            border-radius: 0 5px 5px 0;
        }
        
        .nav-tabs .nav-link.active {
            background-color: #667eea;
            border-color: #667eea;
            color: white;
        }
        
        .nav-tabs .nav-link {
            color: #667eea;
            font-weight: 600;
        }
        
        .tab-content {
            padding-top: 20px;
        }
        
        .warning-text {
            color: #dc3545;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand" href="/customer">
                <i class="fas fa-university"></i>
                银行业务管理系统 - 客户服务
            </a>
            
            <div class="navbar-nav ml-auto">
                <a class="nav-link" href="/customer">
                    <i class="fas fa-arrow-left"></i> 返回首页
                </a>
            </div>
        </div>
    </nav>

    <div class="container main-content">
        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-10">
                <div class="service-card">
                    <div class="text-center mb-4">
                        <h2>
                            <i class="fas fa-user-cog text-primary"></i>
                            账户管理
                        </h2>
                        <p class="text-muted">银行卡挂失解挂、密码修改等服务</p>
                    </div>
                    
                    <!-- 功能选择 -->
                    <ul class="nav nav-tabs justify-content-center" id="accountTabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="report-loss-tab" data-toggle="tab" href="#report-loss" role="tab">
                                <i class="fas fa-ban"></i> 挂失/解挂
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="change-password-tab" data-toggle="tab" href="#change-password" role="tab">
                                <i class="fas fa-key"></i> 修改密码
                            </a>
                        </li>
                    </ul>
                    
                    <div class="tab-content" id="accountTabContent">
                        <!-- 挂失/解挂 -->
                        <div class="tab-pane fade show active" id="report-loss" role="tabpanel">
                            <form id="reportLossForm" novalidate>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="lossCardId">银行卡号 <span class="required">*</span></label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        <i class="fas fa-credit-card"></i>
                                                    </span>
                                                </div>
                                                <input type="text" class="form-control" id="lossCardId" name="cardId" 
                                                       required pattern="^[0-9]{16}$" placeholder="请输入16位银行卡号"
                                                       maxlength="16">
                                            </div>
                                            <div class="invalid-feedback">请输入正确的16位银行卡号</div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="lossPassword">取款密码 <span class="required">*</span></label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        <i class="fas fa-lock"></i>
                                                    </span>
                                                </div>
                                                <input type="password" class="form-control" id="lossPassword" name="password" 
                                                       required pattern="^[0-9]{6}$" placeholder="请输入6位数字密码"
                                                       maxlength="6">
                                                <div class="input-group-append">
                                                    <button type="button" class="btn btn-outline-secondary" id="toggleLossPassword">
                                                        <i class="fas fa-eye"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="invalid-feedback">请输入正确的6位数字密码</div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="text-center">
                                    <button type="button" class="btn btn-report-loss mr-3" onclick="reportLoss()">
                                        <i class="fas fa-ban"></i>
                                        申请挂失
                                    </button>
                                    <button type="button" class="btn btn-cancel-loss" onclick="cancelReportLoss()">
                                        <i class="fas fa-check"></i>
                                        申请解挂
                                    </button>
                                </div>
                                
                                <div class="alert alert-warning mt-3" role="alert">
                                    <i class="fas fa-exclamation-triangle"></i>
                                    <strong>重要提示：</strong>
                                    <ul class="mb-0 mt-2">
                                        <li>挂失后银行卡将无法进行任何交易操作</li>
                                        <li>解挂需要验证密码，确保是本人操作</li>
                                        <li>如非本人操作，请立即联系客服</li>
                                    </ul>
                                </div>
                            </form>
                            
                            <!-- 挂失/解挂加载动画 -->
                            <div class="loading" id="lossLoading">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="sr-only">处理中...</span>
                                </div>
                                <p class="mt-2">正在处理您的请求，请稍候...</p>
                            </div>
                            
                            <!-- 挂失/解挂结果 -->
                            <div class="result-card" id="lossResult">
                                <div class="mb-3">
                                    <i class="fas fa-check-circle text-success" style="font-size: 3rem;"></i>
                                    <h4 class="mt-3 text-success" id="lossResultTitle">操作成功</h4>
                                </div>
                                
                                <p id="lossResultMessage">操作已成功完成</p>
                                
                                <div class="mt-3">
                                    <button type="button" class="btn btn-outline-primary" onclick="resetLossForm()">
                                        <i class="fas fa-redo"></i> 继续操作
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 修改密码 -->
                        <div class="tab-pane fade" id="change-password" role="tabpanel">
                            <form id="changePasswordForm" novalidate>
                                <div class="form-group">
                                    <label for="passwordCardId">银行卡号 <span class="required">*</span></label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <i class="fas fa-credit-card"></i>
                                            </span>
                                        </div>
                                        <input type="text" class="form-control" id="passwordCardId" name="cardId" 
                                               required pattern="^[0-9]{16}$" placeholder="请输入16位银行卡号"
                                               maxlength="16">
                                    </div>
                                    <div class="invalid-feedback">请输入正确的16位银行卡号</div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="oldPassword">原密码 <span class="required">*</span></label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        <i class="fas fa-lock"></i>
                                                    </span>
                                                </div>
                                                <input type="password" class="form-control" id="oldPassword" name="oldPassword" 
                                                       required pattern="^[0-9]{6}$" placeholder="请输入原6位数字密码"
                                                       maxlength="6">
                                                <div class="input-group-append">
                                                    <button type="button" class="btn btn-outline-secondary" id="toggleOldPassword">
                                                        <i class="fas fa-eye"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="invalid-feedback">请输入正确的6位数字密码</div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="newPassword">新密码 <span class="required">*</span></label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        <i class="fas fa-key"></i>
                                                    </span>
                                                </div>
                                                <input type="password" class="form-control" id="newPassword" name="newPassword" 
                                                       required pattern="^[0-9]{6}$" placeholder="请输入新6位数字密码"
                                                       maxlength="6">
                                                <div class="input-group-append">
                                                    <button type="button" class="btn btn-outline-secondary" id="toggleNewPassword">
                                                        <i class="fas fa-eye"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="invalid-feedback">请输入正确的6位数字密码</div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label for="confirmPassword">确认新密码 <span class="required">*</span></label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <i class="fas fa-key"></i>
                                            </span>
                                        </div>
                                        <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" 
                                               required pattern="^[0-9]{6}$" placeholder="请再次输入新密码"
                                               maxlength="6">
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-outline-secondary" id="toggleConfirmPassword">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="invalid-feedback">请输入正确的6位数字密码</div>
                                </div>
                                
                                <div class="text-center">
                                    <button type="submit" class="btn btn-change-password" id="changePasswordBtn">
                                        <i class="fas fa-key"></i>
                                        修改密码
                                    </button>
                                </div>
                                
                                <div class="alert alert-info mt-3" role="alert">
                                    <i class="fas fa-info-circle"></i>
                                    <strong>密码要求：</strong>
                                    <ul class="mb-0 mt-2">
                                        <li>密码必须为6位数字</li>
                                        <li>新密码不能与原密码相同</li>
                                        <li>请牢记新密码，避免频繁修改</li>
                                        <li>建议定期更换密码，确保账户安全</li>
                                    </ul>
                                </div>
                            </form>
                            
                            <!-- 修改密码加载动画 -->
                            <div class="loading" id="passwordLoading">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="sr-only">处理中...</span>
                                </div>
                                <p class="mt-2">正在修改密码，请稍候...</p>
                            </div>
                            
                            <!-- 修改密码结果 -->
                            <div class="result-card" id="passwordResult">
                                <div class="mb-3">
                                    <i class="fas fa-check-circle text-success" style="font-size: 3rem;"></i>
                                    <h4 class="mt-3 text-success">密码修改成功</h4>
                                </div>
                                
                                <p>您的银行卡密码已成功修改，请妥善保管新密码。</p>
                                
                                <div class="mt-3">
                                    <button type="button" class="btn btn-outline-primary" onclick="resetPasswordForm()">
                                        <i class="fas fa-redo"></i> 继续操作
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 安全提示 -->
                    <div class="security-tips">
                        <h6><i class="fas fa-shield-alt"></i> 安全提示</h6>
                        <ul class="mb-0">
                            <li>所有操作都需要验证银行卡密码</li>
                            <li>请确保在安全的网络环境下进行操作</li>
                            <li>如发现银行卡丢失，请立即申请挂失</li>
                            <li>密码修改后请及时验证新密码是否生效</li>
                            <li>如有疑问，请联系客服：400-888-8888</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        $(document).ready(function() {
            // 密码显示/隐藏切换
            $('#toggleLossPassword, #toggleOldPassword, #toggleNewPassword, #toggleConfirmPassword').click(function() {
                const targetId = $(this).attr('id').replace('toggle', '').replace('Password', 'Password');
                const passwordField = $('#' + targetId.charAt(0).toLowerCase() + targetId.slice(1));
                const icon = $(this).find('i');

                if (passwordField.attr('type') === 'password') {
                    passwordField.attr('type', 'text');
                    icon.removeClass('fa-eye').addClass('fa-eye-slash');
                } else {
                    passwordField.attr('type', 'password');
                    icon.removeClass('fa-eye-slash').addClass('fa-eye');
                }
            });

            // 银行卡号输入格式化
            $('#lossCardId, #passwordCardId').on('input', function() {
                let value = $(this).val().replace(/\D/g, '');
                if (value.length > 16) {
                    value = value.substring(0, 16);
                }
                $(this).val(value);
            });

            // 密码输入格式化
            $('#lossPassword, #oldPassword, #newPassword, #confirmPassword').on('input', function() {
                let value = $(this).val().replace(/\D/g, '');
                if (value.length > 6) {
                    value = value.substring(0, 6);
                }
                $(this).val(value);
            });

            // 修改密码表单提交
            $('#changePasswordForm').on('submit', function(e) {
                e.preventDefault();

                const form = this;
                if (!form.checkValidity()) {
                    form.classList.add('was-validated');
                    return;
                }

                // 验证新密码和确认密码是否一致
                const newPassword = $('#newPassword').val();
                const confirmPassword = $('#confirmPassword').val();

                if (newPassword !== confirmPassword) {
                    showError('新密码和确认密码不一致', 'password');
                    return;
                }

                // 验证新密码是否与原密码相同
                const oldPassword = $('#oldPassword').val();
                if (newPassword === oldPassword) {
                    showError('新密码不能与原密码相同', 'password');
                    return;
                }

                changePassword();
            });
        });

        // 申请挂失
        function reportLoss() {
            const form = $('#reportLossForm')[0];
            if (!form.checkValidity()) {
                form.classList.add('was-validated');
                return;
            }

            const cardId = $('#lossCardId').val().trim();
            const password = $('#lossPassword').val().trim();

            if (!confirm('确定要申请挂失银行卡吗？\n挂失后银行卡将无法进行任何交易操作。')) {
                return;
            }

            // 显示加载动画
            showLossLoading(true);

            // 发送挂失请求
            $.ajax({
                url: '/customer/report-loss',
                method: 'POST',
                data: {
                    cardId: cardId,
                    password: password
                }
            })
            .done(function(result) {
                if (result.code === 200) {
                    // 挂失成功
                    showLossResult('挂失成功', '您的银行卡已成功挂失，如需解挂请使用解挂功能。');
                } else {
                    // 挂失失败
                    showError(result.message, 'loss');
                }
            })
            .fail(function(xhr) {
                if (xhr.status === 400) {
                    const response = xhr.responseJSON;
                    showError(response ? response.message : '请求参数错误', 'loss');
                } else {
                    showError('网络请求失败，请检查网络连接', 'loss');
                }
            })
            .always(function() {
                showLossLoading(false);
            });
        }

        // 申请解挂
        function cancelReportLoss() {
            const form = $('#reportLossForm')[0];
            if (!form.checkValidity()) {
                form.classList.add('was-validated');
                return;
            }

            const cardId = $('#lossCardId').val().trim();
            const password = $('#lossPassword').val().trim();

            if (!confirm('确定要申请解挂银行卡吗？\n解挂后银行卡将恢复正常使用。')) {
                return;
            }

            // 显示加载动画
            showLossLoading(true);

            // 发送解挂请求
            $.ajax({
                url: '/customer/cancel-report-loss',
                method: 'POST',
                data: {
                    cardId: cardId,
                    password: password
                }
            })
            .done(function(result) {
                if (result.code === 200) {
                    // 解挂成功
                    showLossResult('解挂成功', '您的银行卡已成功解挂，现在可以正常使用。');
                } else {
                    // 解挂失败
                    showError(result.message, 'loss');
                }
            })
            .fail(function(xhr) {
                if (xhr.status === 400) {
                    const response = xhr.responseJSON;
                    showError(response ? response.message : '请求参数错误', 'loss');
                } else {
                    showError('网络请求失败，请检查网络连接', 'loss');
                }
            })
            .always(function() {
                showLossLoading(false);
            });
        }

        // 修改密码
        function changePassword() {
            const cardId = $('#passwordCardId').val().trim();
            const oldPassword = $('#oldPassword').val().trim();
            const newPassword = $('#newPassword').val().trim();

            // 显示加载动画
            showPasswordLoading(true);
            $('#changePasswordBtn').prop('disabled', true);

            // 发送修改密码请求
            $.ajax({
                url: '/customer/change-password',
                method: 'POST',
                data: {
                    cardId: cardId,
                    oldPassword: oldPassword,
                    newPassword: newPassword
                }
            })
            .done(function(result) {
                if (result.code === 200) {
                    // 修改成功
                    showPasswordResult();
                } else {
                    // 修改失败
                    showError(result.message, 'password');
                }
            })
            .fail(function(xhr) {
                if (xhr.status === 400) {
                    const response = xhr.responseJSON;
                    showError(response ? response.message : '请求参数错误', 'password');
                } else {
                    showError('网络请求失败，请检查网络连接', 'password');
                }
            })
            .always(function() {
                showPasswordLoading(false);
                $('#changePasswordBtn').prop('disabled', false);
            });
        }

        // 显示挂失/解挂结果
        function showLossResult(title, message) {
            $('#lossResultTitle').text(title);
            $('#lossResultMessage').text(message);

            // 隐藏表单，显示结果
            $('#reportLossForm').fadeOut(300, function() {
                $('#lossResult').fadeIn(300);
            });
        }

        // 显示修改密码结果
        function showPasswordResult() {
            // 隐藏表单，显示结果
            $('#changePasswordForm').fadeOut(300, function() {
                $('#passwordResult').fadeIn(300);
            });
        }

        // 重置挂失/解挂表单
        function resetLossForm() {
            $('#lossResult').fadeOut(300, function() {
                $('#reportLossForm').fadeIn(300);
                $('#reportLossForm')[0].reset();
                $('#reportLossForm').removeClass('was-validated');
            });
        }

        // 重置修改密码表单
        function resetPasswordForm() {
            $('#passwordResult').fadeOut(300, function() {
                $('#changePasswordForm').fadeIn(300);
                $('#changePasswordForm')[0].reset();
                $('#changePasswordForm').removeClass('was-validated');
            });
        }

        // 显示/隐藏挂失/解挂加载动画
        function showLossLoading(show) {
            if (show) {
                $('#reportLossForm').hide();
                $('#lossLoading').show();
            } else {
                $('#lossLoading').hide();
                $('#reportLossForm').show();
            }
        }

        // 显示/隐藏修改密码加载动画
        function showPasswordLoading(show) {
            if (show) {
                $('#changePasswordForm').hide();
                $('#passwordLoading').show();
            } else {
                $('#passwordLoading').hide();
                $('#changePasswordForm').show();
            }
        }

        // 显示错误信息
        function showError(message, type) {
            const alertHtml = `
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-circle"></i>
                    ${message}
                    <button type="button" class="close" data-dismiss="alert">
                        <span>&times;</span>
                    </button>
                </div>
            `;

            if (type === 'loss') {
                $('#report-loss').prepend(alertHtml);
            } else {
                $('#change-password').prepend(alertHtml);
            }

            setTimeout(function() {
                $('.alert').alert('close');
            }, 5000);
        }
    </script>
</body>
</html>
